"spinners "
Bootstrap 4.1.1 Snippet by YONY GUTIERREZ CAMPOS

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="floatingBarsG"> <div class="blockG" id="rotateG_01"></div> <div class="blockG" id="rotateG_02"></div> <div class="blockG" id="rotateG_03"></div> <div class="blockG" id="rotateG_04"></div> <div class="blockG" id="rotateG_05"></div> <div class="blockG" id="rotateG_06"></div> <div class="blockG" id="rotateG_07"></div> <div class="blockG" id="rotateG_08"></div> </div> </div> </div>
#floatingBarsG{ position:relative; width:132px; height:164px; margin:auto; } .blockG{ position:absolute; background-color:rgb(255,255,255); width:21px; height:51px; border-radius:17px 17px 0 0; -o-border-radius:17px 17px 0 0; -ms-border-radius:17px 17px 0 0; -webkit-border-radius:17px 17px 0 0; -moz-border-radius:17px 17px 0 0; transform:scale(0.4); -o-transform:scale(0.4); -ms-transform:scale(0.4); -webkit-transform:scale(0.4); -moz-transform:scale(0.4); animation-name:fadeG; -o-animation-name:fadeG; -ms-animation-name:fadeG; -webkit-animation-name:fadeG; -moz-animation-name:fadeG; animation-duration:1.2s; -o-animation-duration:1.2s; -ms-animation-duration:1.2s; -webkit-animation-duration:1.2s; -moz-animation-duration:1.2s; animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-direction:normal; -o-animation-direction:normal; -ms-animation-direction:normal; -webkit-animation-direction:normal; -moz-animation-direction:normal; } #rotateG_01{ left:0; top:60px; animation-delay:0.45s; -o-animation-delay:0.45s; -ms-animation-delay:0.45s; -webkit-animation-delay:0.45s; -moz-animation-delay:0.45s; transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); } #rotateG_02{ left:17px; top:21px; animation-delay:0.6s; -o-animation-delay:0.6s; -ms-animation-delay:0.6s; -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); } #rotateG_03{ left:55px; top:6px; animation-delay:0.75s; -o-animation-delay:0.75s; -ms-animation-delay:0.75s; -webkit-animation-delay:0.75s; -moz-animation-delay:0.75s; transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); } #rotateG_04{ right:17px; top:21px; animation-delay:0.9s; -o-animation-delay:0.9s; -ms-animation-delay:0.9s; -webkit-animation-delay:0.9s; -moz-animation-delay:0.9s; transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } #rotateG_05{ right:0; top:60px; animation-delay:1.05s; -o-animation-delay:1.05s; -ms-animation-delay:1.05s; -webkit-animation-delay:1.05s; -moz-animation-delay:1.05s; transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } #rotateG_06{ right:17px; bottom:15px; animation-delay:1.2s; -o-animation-delay:1.2s; -ms-animation-delay:1.2s; -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; transform:rotate(135deg); -o-transform:rotate(135deg); -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); } #rotateG_07{ bottom:0; left:55px; animation-delay:1.35s; -o-animation-delay:1.35s; -ms-animation-delay:1.35s; -webkit-animation-delay:1.35s; -moz-animation-delay:1.35s; transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); } #rotateG_08{ left:17px; bottom:15px; animation-delay:1.5s; -o-animation-delay:1.5s; -ms-animation-delay:1.5s; -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; transform:rotate(-135deg); -o-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); } @keyframes fadeG{ 0%{ background-color:rgb(247,0,247); } 100%{ background-color:rgb(255,255,255); } } @-o-keyframes fadeG{ 0%{ background-color:rgb(247,0,247); } 100%{ background-color:rgb(255,255,255); } } @-ms-keyframes fadeG{ 0%{ background-color:rgb(247,0,247); } 100%{ background-color:rgb(255,255,255); } } @-webkit-keyframes fadeG{ 0%{ background-color:rgb(247,0,247); } 100%{ background-color:rgb(255,255,255); } } @-moz-keyframes fadeG{ 0%{ background-color:rgb(247,0,247); } 100%{ background-color:rgb(255,255,255); } }

Related: See More


Questions / Comments: